<script lang="ts" setup>
  import { Form, Message } from '@arco-design/web-vue';
  import { ref } from 'vue';
  import { createInvite } from '@/api/operator';

  const emit = defineEmits(['close']);

  const data = ref({
    name: '',
    phone: '',
  });

  const creating = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);

  const handleSubmit = async () => {
    if (formRef.value) {
      const vs = await formRef.value.validate();
      if (!vs) {
        try {
          await createInvite(data.value);
          Message.success('操作成功');
          emit('close', true);
        } finally {
          creating.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    title="发起执行机构入驻邀请"
    :width="500"
    visible
    :ok-loading="creating"
    @cancel="emit('close', true)"
    @before-ok="handleSubmit"
  >
    <a-form ref="formRef" :model="data" layout="vertical">
      <a-form-item
        label="执行机构名称"
        field="name"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="data.name" placeholder="请输入邀请执行机构名称" />
      </a-form-item>

      <a-form-item
        label="管理员手机号"
        field="phone"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <a-input v-model="data.phone" placeholder="请输入管理员手机号" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
